import React from "react"
import {Single} from "../../api/index"
import sstfanhui from "../../imgs/返回.png"
class Geren extends React.Component{
    constructor(){
        super()
        this.state={
            picture:[],
            val:[]
        }
    }
    componentDidMount(){   
         Single().then(res=>{
           let a= res.artists
            for(let i=0;i<a.length;i++){
                this.state.val.push('关注')
            }
            this.setState({
                picture:a
            })
         })
    }
   
    fanhui(){
        let {go}=this.props.history
        go(-1)
    }
    render(){
        
        return(
                <div class="sstSingle">
                    <div className="sst_sh">
                         <img src={sstfanhui} className="sst_fanhui" onClick={this.fanhui.bind(this)}/>
                    <span className="hotSingle">热门歌手</span>
                    </div>
                   
                {    
                      this.state.picture.map((item,index)=>{
                          return( 
                              <div className="SG" key={index}>
                                 <img  src={item.picUrl} className="hotsingle"/> <p className="sst_p">{item.name}</p>
                                <input type="button" ref={ha=>this.myref=ha} onClick={this.guanzhu.bind(this,index)}   className="guanzhu" value={this.state.val[index]}/>
                              </div>                              
                          )
                      })
                      }
                </div>
        )
    }
    guanzhu(ind){
       // console.log(this.state.val)
        // console.log(this.state.val[ind],'-----------------');
        
            this.state.val[ind]=this.state.val[ind]=="关注"?"已关注":"关注"
            // console.log(this.state.val[ind],'+++++++++++——————');
            this.setState({})
    }
}
export default Geren